<template>
  <CommonPanel title="区域设备运维情况">
    <ScrollTable :columns="columns" :tableData="regionDevice">
      <template #default="{ list }">
        <div class="scroll-row" v-for="item in list" :key="item.id">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.name"
            placement="top"
          >
            <div class="scroll-row__item">{{ item.name }}</div>
          </el-tooltip>
          <div class="scroll-row__item">{{ item.number }}</div>
          <div class="scroll-row__item">{{ item.line }}</div>
          <div class="scroll-row__item">{{ item.offline }}</div>
          <div class="scroll-row__item">{{ item.not_detected }}</div>
        </div>
      </template>
    </ScrollTable>
  </CommonPanel>
</template>

<script setup>
import ScrollTable from "../components/scroll-table.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  regionDevice: {
    type: Array,
    default: () => [
      {
        name: "1",
        number: 1,
        line: 1,
        offline: 1,
        not_detected: 1,
      },
    ],
  },
});

const columns = [
  { label: "园区", prop: "name" },
  { label: "总设备数", prop: "number" },
  { label: "在线数", prop: "line" },
  { label: "离线数", prop: "offline" },
  { label: "未检测数", prop: "not_detected" },
];

onMounted(() => {
  // getDataList();
});

// const findMaxValue = (data) => {
//   if (data.length === 0) {
//     return 0;
//   }
//   const maxValue = data.reduce((max, current) => {
//     return max > current.amount ? max : current.amount;
//   }, data[0].amount);

//   return maxValue;
// };
// const formatToPercentage = (number) => {
//   const percentage = (number * 100).toFixed(2);
//   return `${percentage}%`;
// };
</script>

<style lang="scss" scoped>
.scroll-row {
  cursor: pointer;
  font-size: 14px;
  color: #e9f7ff;
  height: 40px;
  display: flex;
  align-items: center;

  &:nth-child(2n) {
    background-color: transparent;
  }

  &:nth-child(2n + 1) {
    background-color: rgba(13, 76, 144, 0.5);
  }

  &__item {
    flex: 1;
    width: 0px;
    padding: 0px 23px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
